<%--
  Created by IntelliJ IDEA.
  User: carlo
  Date: 2019/7/19
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%= basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>添加角色 - 角色管理 - 物流管理系统</title>
    <meta name="keywords" content="物流管理系统,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="物流管理系统，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-add" action="role/insert" method="post">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="rolename" name="rolename">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色描述：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="remark" name="remark">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色权限：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <ul class="ztree" id="tree"></ul>
            </div>
        </div>
        <input type="hidden" name="permissionIds" id="permissionIds">
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        //zTree 配置
        let setting = {
            check: {
                enable: true,
                chkStyle: "checkbox",
            },
            async: {
                enable: true,
                url: "role/getTree",
                dataType: "json",
                type: "post",
            },
            callback: {
                 onAsyncSuccess: function (event, treeId, treeNode, msg) {
                 }
            },
            data:{
                simpleData: {
                    enable: true,
                    idKey: "permissionId",
                    pIdKey: "parentId",
                    rootPId: -1,
                }
            }
        }

        $.fn.zTree.init($('#tree'), setting, null)
        //zTree 配置

        $("#form-admin-add").validate({
            rules:{
                rolename:{
                    required: true,
                    remote: {
                        url: "role/checkRole",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $('#rolename').val()
                            }
                        }
                    }
                },
                remark:{
                    required: true
                }
            },
            messages:{
                rolename: {
                    required: "角色名不能为空",
                    remote: "角色名已存在"
                },
                remark: {
                    required: "角色描述不能为空"
                }
            },
            submitHandler:function(form){
                //将 Tree 选中的内容获取出来，加入隐藏输入框中
                let treeObj = $.fn.zTree.getZTreeObj("tree");
                let nodes = treeObj.getCheckedNodes(true);
                let nodesArr = $.map(nodes, function (node) {
                    return node.permissionId
                })
                $('#permissionIds').val(nodesArr.toString())


                $(form).ajaxSubmit(function (res) {
                    if (res == true) {
                        //弹出一个提示消息
                        layer.msg("添加成功！", {time: 1000, icon:6},function () {
                            parent.refreshTable()
                            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    } else {
                        //弹出一个提示消息
                        layer.msg("添加失败！请联系管理员", {time: 1000, icon:5},function () {
                            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    }
                })
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>